<link href="/css/groupShowAll.css" media="screen" rel="stylesheet" type="text/css">

<!-- Section for draws -->
<section class="draws quarterFinalsStage">
    <article class="match quarterFinals p1">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match quarterFinals p2">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match quarterFinals p3">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match quarterFinals p4">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match semiFinals p1">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match semiFinals p2">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match final">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <article class="match thirdPlace">
        <figure>
            <div class="hPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <figure>
            <div class="gPlayer">
                <img src="/img/noPicture.jpg">
            </div>
            <span class="playerName"></span>
        </figure>
        <table class="results">
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
            <tr><td><span class="hostScore"></span> : <span class="guestScore"></span></td></tr>
        </table>
    </article>
    <h1 class="finalText">FINAL</h1>
    <h3 class="thirdPlaceText">THIRD PLACE</h3>
    <h3 class="semiFinalsText">SEMI FINALS</h3>
    <h3 class="quarterFinalsText">QUARTER FINALS</h3>
    <article class="winnerPost">
        <h2>WINNER</h2>
        <img src="/img/firstPlaceCup.png" />
        <img src="/img/player.jpg" />
        <span>Mihail Merkov</span>
    </article>
</section>

<div id="groupsPattern">

</div>

<section class="infoPlayer span4">
    <div class="picturePlayer">
    </div>
    <div class="info">
    </div>
</section>

<script type="text/javascript">

    jQuery(document).ready(function() {
        var groupService = new TennisTour.Service.GroupService();
        var groups = groupService.parseArrayToGroupsFromJSON('<?php echo $this->allGroups; ?>');
        if (groups.length == 0) {
            jQuery('#content').html('<h1 style="text-align: center;">No selected groups.</h1>');
        } else {
            groupService.showAllGroups({
                deployId : 'groupsPattern',
                collectionGroup : groups
            });

            var draws = jQuery.evalJSON('<?php echo $this->draws; ?>');
            groupService.showDraws(draws);
        }
    });

</script>